<template>
  <div>
    <div>
      <el-button type="primary" @click="open">添加角色</el-button>
    </div>
    <div>
      <el-table :data="roleList" stripe>
        <el-table-column label="序号" type="index" />
        <el-table-column label="角色">
          <template slot-scope="scope">
            <div>
              <span v-if="!scope.row.edit">{{ scope.row.name }}</span>
              <el-input v-else v-model="scope.row.name" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="启用">
          <template slot-scope="scope">
            <div>
              <div v-if="!scope.row.edit">
                <span v-if="scope.row.state=='1'">已启用</span>
                <span v-if="scope.row.state=='0'">未启用</span>
              </div>
              <el-switch v-if="scope.row.edit" v-model="scope.row.state" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="description">
          <template slot-scope="scope">
            <div>
              <span v-if="!scope.row.edit">{{ scope.row.description }}</span>
              <el-input v-if="scope.row.edit" v-model="scope.row.description" type="textarea" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <div v-if="!scope.row.edit">
                <el-link type="primary" @click="openPer(scope.row.id)">分配权限</el-link>
                <el-link type="primary" style="margin:0 20px;" @click="toEdit(scope.row)">编辑</el-link>
                <el-link type="primary" @click="toDel(scope.row.id)">删除</el-link>
              </div>
              <div v-if="scope.row.edit">
                <el-button type="primary" @click="sureEdit(scope.row)">确定</el-button>
                <el-button @click="cancelEdit(scope.row)">取消</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center;">
        <el-pagination
          layout=" prev, pager, next,sizes"
          :page-sizes="[3, 5, 10]"
          :total="total"
          :page-size="pagesize"
          @current-change="pageChange"
          @size-change="sizeChange"
        />
      </div>
    </div>
    <!-- 添加角色弹出框 -->
    <el-dialog title="添加角色" :visible.sync="roleFlag" width="50%">
      <el-form ref="myroleform" label-width="120px" :model="formObj" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formObj.name" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch
            v-model="formObj.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="formObj.description" type="textarea" />
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: center;">
            <el-button type="primary" @click="toAdd">确 定</el-button>
            <el-button @click="roleFlag=false">取 消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分配权限的弹出层 -->
    <el-dialog title="分配权限" width="50%" :visible.sync="perFlag">
      <!-- 项目中做了哪些优化  长列表优化 数据量大的优化   虚拟滚动插件
vue-virtual-scroller或vue-virtual-scroll-list
        -->
      <el-tree
        ref="mytree"
        :data="perTreeData"
        :props="props"
        show-checkbox
        node-key="id"
        :default-checked-keys="permIds"
        @check-change="handleCheckChange"
      />
      <span slot="footer">
        <el-button type="primary" @click="toSendPer">确定</el-button>
        <el-button @click="perFlag=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList, addRoleApi, updateRoleApi, delRoleApi, getPermissionList, getRoleDetail, assignPerm } from '@/api/role'
import { toTree } from '@/utils/index'
export default {
  data() {
    return {
      props: { // 配置树形的加载的字段
        label: 'name',
        children: 'children'
      },
      perTreeData: [], // 权限的树形树形
      perFlag: false, // 分配权限的弹出层
      total: 0, // 数据总条数
      roleList: [], // 角色列表
      page: 1, // 当前页码
      pagesize: 5, // 每页条数
      value: '',
      roleFlag: false, // 控制添加弹出层的变量
      formObj: { // 用来收集数据的
        name: '',
        description: '',
        state: '1'
      },
      rules: { // 表单规则
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
      },
      permIds: [], // 用来收集选择的权限id的 或回显权限
      roleId: ''// 正在分配权限的id
    }
  },
  watch: {
    perFlag(newVal) {
      if (newVal) {
        // 监听弹出层打开 调用权限列表
        this.getPermission()
      }
    }
  },
  created() {
    this.getRole()
  },
  methods: {
    // page: 1
    //  pagesize: 5
    async  getRole() { // 获取角色列表接口
      const res = await getRoleList({
        page: this.page,
        pagesize: this.pagesize
      })
      this.roleList = res.data.rows
      this.total = res.data.total
      console.log(res, '角色列表')
    },
    pageChange(page) { // 分页自带change 事件
      // page--> 当前页码
      this.page = page
      this.getRole()
    },
    sizeChange(size) { // 每页条数 change事件
      console.log(size, '--------')
      this.pagesize = size// size 选择每页的条数
      this.getRole()
    },
    open() { // 点击添加角色
      this.roleFlag = true
    },
    toAdd() { // 添加接口
      this.$refs.myroleform.validate(async(vali) => {
        if (vali) {
          // 启用状态的处理
          this.formObj.state = this.formObj.state ? 1 : 0

          const res = await addRoleApi(this.formObj)
          console.log(res, '添加角色')
          // 重置表单
          this.$refs.myroleform.resetFields()
          // 关闭弹出层
          this.roleFlag = false
          // 重新获取列表
          this.getRole()
        }
      })
    },
    toEdit(row) { // 点击编辑 当前行进入编辑模式
      this.$set(row, 'edit', true)// 修改当前行的编辑状态
      console.log(row, '-------------')
    },
    async sureEdit(row) { // 编辑接口
      console.log(row, '-------------')
      row.state = row.state ? 1 : 0
      this.$delete(row, 'edit') // 删除编辑状态
      const res = await updateRoleApi(row)
      console.log(res, '------------------')
      this.getRole()
    },
    cancelEdit(row) { // 点击取消
      this.$delete(row, 'edit')
    },
    async toDel(id) { // 删除接口
      const res = await delRoleApi(id)
      console.log(res, '删除接口')
      this.getRole()
    },
    handleCheckChange() {

    },
    async getPermission() { // 获取权限列表接口
      const res = await getPermissionList()
      console.log(res, '权限列表')
      this.perTreeData = toTree(res.data, 0)
      console.log(this.perTreeData, '处理的tree数据')
    },
    async openPer(id) { // 打开权限分配弹出层
      this.perFlag = true
      this.roleId = id// 存储下正在分配权限的id
      const res = await getRoleDetail(id) // 获取角色详情
      console.log(res, '角色详情')
      this.permIds = res.data.permIds
      console.log(this.permIds, '回显的权限')
    },
    async toSendPer() { // 调用分配权限接口
      const res = await assignPerm({
        id: this.roleId,
        permIds: this.$refs.mytree.getCheckedKeys() // 获取选中的权限id
      })
      console.log(res, '分配权限接口')
      this.perFlag = false
    }
  }

}
</script>
<style lang="scss">

</style>
